<template>
<div>
<!--   面包屑导航条-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>学生模块管理</el-breadcrumb-item>
    <el-breadcrumb-item>学生信息</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">

    <el-table
      :data="ddList"
      border
      style="width: 100%">

      <el-table-column
        prop="id"
        label="id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="学生姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话"
        width="120">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="sellerId"-->
<!--        label="销售"-->
<!--        width="120">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="nickName"
        label="昵称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="studentFee"
        label="余额"
        width="120">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="180">
        <template slot-scope="scope">
          {{scope.row.status|stidFit}}
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
        <template slot-scope="scope">
          {{scope.row.createTime|createFit}}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="180">
        <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
        <template slot-scope="scope">
          <el-dropdown split-button type="primary"  size="mini" >
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item >
                <el-button type="text" @click="allClasses(scope.row.id)">
                  所有课时
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item style="color: crimson">
                <el-button type="text" @click="ClassFinished(scope.row.id)" style="color: crimson">
                  已上完课时
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item style="color: crimson">
                <el-button type="text" @click="NotFinishClass(scope.row.id)" >
                  未上课时
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item style="color: crimson">
                <el-button type="text" @click="getPayFeeByPage(scope.row.id)" style="color: crimson">
                  总费用
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item style="color: crimson">
                <el-button type="text" @click="UpdatePass(scope.row.id)" >
                  修改密码
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</div>
</template>

<script>
  import moment from 'moment'
  import UpdatePass from "./UpdatePass";
    export default {
        name: "StudentList",
      data(){
        return{
          student:{},
          ddList:[],
          middle:{}
        }
      },
      methods:{
        list:function () {
          this.middle.user=JSON.parse(window.sessionStorage.getItem("user"));
          console.info(this.middle.user.id);
          this.$http.post("http://localhost:9040/student/getStudentInfo?userId="+this.middle.user.id).then((res)=>{
            /*请求数据进行赋值渲染*/
            console.info(res);
            this.student = res.data.result.student;
            this.ddList.push(this.student);
          })
        },
        //所有课时
        allClasses:function (id) {
          this.$router.push({path:'/classes',query:{id:id}});
        },
        //已上完课时
        ClassFinished:function (id) {
          this.$router.push({path:'/finish',query:{id:id}});
        },
        //未上完课时
        NotFinishClass:function (id) {
          this.$router.push({path:'/notFinish',query:{id:id}});
        },
        getPayFeeByPage:function (id) {
          this.$router.push({path:'/getPayFee',query:{id:id}});
        },
        //修改密码
        UpdatePass:function (id) {
          this.$router.push({path:'/UpdatePass',query:{id:id}});
        }
      },
      mounted() {
          this.list();
      },
      filters:{
        createFit:function (val) {
        return moment(val).format("YYYY-DD-MM hh:mm:ss")
        },
        stidFit:function (val) {
         if (val==0){
           return "未上课";
         }else if (val==1){
           return "已上课";
         }else if (val==2){
           return "已删除";
         }
        }
      }
    }
</script>

<style scoped>

</style>
